
<!--
 * @Author: wang_sheshe
 * @Date: 2021-05-17 15:04:17
 * @LastEditTime: 2021-07-06 09:50:34
 * @Description: 登记设备
-->
<template>
	<article class="bg_4dbfae">
		<div v-if="!showFinish">
			<!-- 头组件 -->
			<van-nav-bar title="待完成设备维护工作"  left-arrow @click-left="back">
				<template slot="right">
					<div class="parent-circle">
						<div class="child-circle"></div>
					</div>
				</template>
			</van-nav-bar>
			<!-- content -->
			<van-collapse v-model="activeNames" @change="changeDeviceTypeEvent" class="collapse">
				<van-collapse-item :name="typeItem.code" v-for="typeItem in deviceTypeList" :title="typeItem.codeName" :key="typeItem.code">
					<div slot="title" style="display: flex;">
						<span class="line_green"></span>
						<span>{{ typeItem.codeName }}</span>
					  </div>
				  <!-- 间隔下设备列表 -->
				  <van-list
				:finished="finished">
				<van-cell
				  v-for="(item,index) in typeItem.deviceList"
				  clickable
				  :key="index"            
				  @click="deviceClickEvent(item)"
				>
				  <div slot="title">
					<div style="display: flex;justify-content: space-between;">
						<span>{{item.deviceName}}</span>
						<van-checkbox style="display: inline;margin-right: 15px;margin-left: 0.6rem;" v-model="item.check" checked-color="#057b54"/>
					</div>
					<div>
						<span style="color: #999999;">4月30号</span>
					</div>
				  </div>
				</van-cell>
				 </van-list>
				</van-collapse-item>
			</van-collapse>
			
			<van-row class="btn-wrapper" style="text-align: center;">
				<van-button type="primary" size="small" class="c" @click="confirm">确认选择</van-button>
			</van-row>
		</div>

		<protect-finish v-if="showFinish" @concel="onCancel"></protect-finish>
	</article>
</template>

<script type="text/javascript">
	// import { Tabbar, TabbarItem ,Tag } from 'vant';
	import ProtectFinish from './ProtectFinish';
	export default {
		name: 'DefectManage',
		data() {
			return {
				finished:true,
                task:{},
                showPicker:false,
				activeNames:[],
				maintianWorkList: [],//获取维护工作
				deviceTypeList: [
					{ //设备类型列表
						code:1,
						codeName: '维护记录列表',
						check: false, //当前设备是否选中
						deviceList: [{
						check: false, //当前设备是否选中
						deviceTypeId:'',
						deviceId: '0301',
						deviceName: '设备定期轮换、试验，排水通风系统维护'
						},] //下级设备列表
					},
					{ //设备类型列表
						code:2,
						codeName: '维护记录列表',
						check: false, //当前设备是否选中
						deviceList: [{
						check: false, //当前设备是否选中
						deviceTypeId:'',
						deviceId: '0301',
						deviceName: '设备定期轮换、试验，排水通风系统维护'
						},] //下级设备列表
					},
					{ //设备类型列表
						code:3,
						codeName: '维护记录列表',
						check: false, //当前设备是否选中
						deviceList: [{
						check: false, //当前设备是否选中
						deviceTypeId:'',
						deviceId: '0301',
						deviceName: '设备定期轮换、试验，排水通风系统维护'
						},] //下级设备列表
					}
				],  
				showFinish:false,
				userInfo:{},
			}
		},
		
		computed: {
			
		},
		
		components: {
			ProtectFinish
		},
		
		methods: {
			confirm(){
				this.showFinish = true;
				// this.$router.push({
				// 	path: '/protectFinish',
				// 	query: {
				// 		title: '开始执行'
				// 	}
				// })
            },
            onConfirm(){
                
            },
            onCancel(){
				this.showFinish = false;
            },
			changeDeviceTypeEvent(){},deviceClickEvent(){},
			/**
			 * 返回
			 */
			 back(){
				 if(this.showFinish){
					this.showFinish = false;
				 }else{
					history.go(-1)
				 }
			},
			/**
			* @description: 获取未完成维护工作
			* @param {*}
			* @return {*}
			*/
			getUnfinishMaintainWork() {
				var self = this;
				var params = {
					userId: this.userInfo.userId,//用户id
					roleCode: "",//用户角色
				}
				this.$Toast.loading({
						duration: 0,//展示时长 0不会消失
						message: "维护工作获取中...",
						forbidClick: true,//是否禁止背景点击
						overlay: true//是否显示背景遮罩层
					})
				getUnfinishMaintainWork(params).then(data => {
					self.$Toast.clear();
					if(data.success) {
						self.$Toast.success(data.msg);
						self.maintianWorkList = data.data;
					}else{
						self.$Toast.fail(data.msg)
					}
				}).catch(err => {
					self.$Toast.fail(err)
				})
			}
		},
		
		mounted() {
			var userInfo = localStorage.getItem("userInfo");
			this.userInfo = JSON.parse(userInfo);
		},
		
		created() {
			
		},
		
	}
</script>

<style scoped>
	article {
		display: flex;
		flex-direction: column;
		height: 100vh;
        font-family: 微软雅黑;
        background: #ffffff;
	}
	.active{
		color: #36BDA6 !important;
		background: #ECF6F4 !important;
	}
	.van-nav-bar__text,.van-nav-bar .van-icon{
		color: #333333;
    }
    .van-button--default {
        margin-right: 20px !important;
        width: 80px;
    }
    .van-button--primary {
		background-color: #17B49B;
        border: 0.02667rem solid #17B49B;
        color: white;
		width: 138px;
        margin: 0 auto;
    }
	.lineGray{
		height: 8px;
		background-color: #F5F6FA;
		border-radius: 5px;
		margin: 10px;
	}
	.templateDiv{
		display: flex;
		justify-content: space-between;
		padding: 10px 15px;
		font-size: 1.125rem;
	}
	.van_Input textarea{
		display: block;
		width: 100% !important;
		border: 1px solid #f2f2f3;
		border-radius: 4px;
		height: 50px;
	}
	.line{
		display: inline-block;
		width: calc(100% - 150px);
		height: 1px;
		background-color: #999999;
		margin-left: 35px;
		position: relative;
		top: 0.2rem;
    }
    .line_green{
		display: inline-block;
		height: 16px;
		width: 3px;
		background: #17B49B;
		border-radius: 3px;
		position: relative;
		top: 3px;
		margin-right: 10px;
    }
	.btn-wrapper{
		position: fixed;
		text-align: center;
		width: 100%;
		bottom: 10px;
	}
</style>
